import Card from '@/components/Card';
import Description from '@/components/Description';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';

const BaseInfo: React.FC<{
  detailInfo: API.StationInfo | null;
}> = ({ detailInfo }) => {
  const intl = useIntl();
  const [items, setItems] = useState<
    Array<{ key: string; label: string; children: React.ReactNode; span?: number }>
  >([
    {
      key: 'createTime',
      label: intl.formatMessage({ id: 'siteManage.createTime' }),
      children: '',
    },
    {
      key: 'modifyTime',
      label: intl.formatMessage({ id: 'siteManage.updateTime' }),
      children: '',
    },
    {
      key: 'stationName',
      label: intl.formatMessage({ id: 'siteManage.plantName' }),
      children: '',
    },
    {
      key: 'stationNo',
      label: intl.formatMessage({ id: 'siteManage.plantCode' }),
      children: '',
    },
    {
      key: 'tenantName',
      label: intl.formatMessage({ id: 'siteManage.tenantName' }),
      children: '',
    },
    {
      key: 'stationType',
      label: intl.formatMessage({ id: 'siteManage.plantType' }),
      children: '',
      span: 1,
    },
  ]);

  const [siteTypes, setSiteTypes] = useState<Array<{ value: string; label: string }>>([]);

  useEffect(() => {
    fetchDictInfo(DATABASE_TYPE_ENUM.SITE_TYPE).then((res) => {
      setSiteTypes(res || []);
    });
  }, []);

  useEffect(() => {
    if (detailInfo && detailInfo.id) {
      const result = items.map((item) => {
        const newItem = { ...item };
        newItem.children = detailInfo[item.key as keyof API.StationInfo];
        if (item.key === 'stationType') {
          newItem.children =
            siteTypes.find((row) => row.value === detailInfo.stationType)?.label || '';
        }
        return newItem;
      });
      setItems(result);
    }
  }, [detailInfo, siteTypes]);

  return (
    <Card title={intl.formatMessage({ id: 'siteManage.basePlantInfo' })}>
      <Description items={items} />
    </Card>
  );
};

export default BaseInfo;
